$(function () {
    // 文章传递的参数
    let q = {
        pagenum: 1, // 默认出现在第几页
        pagesize: 2, // 每页几条数据
        cate_id: '',
        state: ''
    }
    initArtlist()
    // 获取文章全部内容并渲染到页面
    function initArtlist() {
        axios({
            method: 'get',
            url: '/my/article/list',
            params: q
        }).then(res => {
            let list = res.data.data
            console.log(list);
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            let arr = []
            list.forEach(ele => {
                arr.push(`<tr>
                <td>${ele.title}</td>
                <td>${ele.cate_name}</td>
                <td>${ele.pub_date}</td>
                <td>${ele.state}</td>
                <td>
                <button type="button" class="layui-btn-xs layui-btn layui-btn editbtn">编辑</button>
                <button type="button" data-id="${ele.Id}" class="layui-btn-xs layui-btn layui-btn layui-btn-danger removebtn">删除</button>
                </td>
                </tr>`)
            })
            let a = arr.join('')
            $('#tb').empty().html(a)
            page(res.data.total)
        })
    }

    // 渲染文章分类下拉框
    let form = layui.form
    initArtCateList()
    function initArtCateList() {
        axios({
            method: 'get',
            url: '/my/article/cates',
        }).then(res => {
            console.log(res.data);
            let list_data = res.data.data
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            let list = ['<option value="">请选择文章类别</option>']
            list_data.forEach(element => {
                list.push(`
                <option value="${element.Id}">${element.name}</option>
                `)
            })
            $('.s1').html(list.join(''))
            // 更新渲染
            form.render()
        })
    }

    // 筛选按钮功能
    $('.searchform').on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $('.s1').val()
        q.state = $('.s2').val()
        initArtlist()
    })


    // 分页器
    function page(params) {
        var laypage = layui.laypage;
        laypage.render({
            elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
            count: params,//数据总数，从服务端得到
            limit: q.pagesize, // 每页显示的条数
            curr: q.pagenum,
            // 分页器的自定义排版
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            groups: 5, // 连续出现的页码个数,最多出现,之后以省略号显示
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    q.pagenum = obj.curr
                    initArtlist()
                }
            }
        });

        // 删除文章功能
        $('tbody').on('click', '.removebtn', function () {
            let id = $(this).attr('data-id')
            layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
                //do something
                axios({
                    method: 'get',
                    url: '/my/article/delete/' + id
                }).then(res => {
                    console.log(res.data);
                    if (res.data.status != 0) {
                        return layui.layer.msg(res.data.message)
                    }
                    layui.layer.msg('恭喜您,删除文章成功!')
                    // 短路运算,当页面中的数据只有一条的时候让当前页的减 1 
                    $('.removebtn').length == 1 && q.pagenum > 1 && q.pagenum--
                    initArtlist()
                })
                layer.close(index);
            });
        })
    }
})




